<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Xbox One 手柄测试工具</title>
    <style>
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background-color: #107C10;
            color: white;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .container {
            width: 100%;
            max-width: 1200px;
            background-color: #0E6B0E;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
        }
        .section {
            margin-bottom: 30px;
            background-color: #0A590A;
            padding: 15px;
            border-radius: 8px;
        }
        h2 {
            margin-top: 0;
            border-bottom: 2px solid #fff;
            padding-bottom: 10px;
        }
        .controller {
            position: relative;
            width: 600px;
            height: 400px;
            margin: 0 auto;
            background-image: url('controller.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
        .button {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            cursor: pointer;
        }
        .button.active {
            background-color: #E2B93B;
            box-shadow: 0 0 10px #FFD700;
        }
        .button.pressed {
            background-color: #FF5252;
            box-shadow: 0 0 10px #FF0000;
        }
        .stick {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
        }
        .stick-dot {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #444;
            top: 15px;
            left: 15px;
            transition: all 0.1s;
        }
        .trigger {
            position: absolute;
            width: 40px;
            height: 15px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 5px;
        }
        .dpad {
            position: absolute;
            width: 80px;
            height: 80px;
            left: 150px;
            top: 200px;
        }
        .dpad-button {
            position: absolute;
            width: 25px;
            height: 25px;
            background-color: rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        .dpad-button.active {
            background-color: #E2B93B;
            box-shadow: 0 0 10px #FFD700;
        }
        .dpad-button.pressed {
            background-color: #FF5252;
            box-shadow: 0 0 10px #FF0000;
        }
        .dpad-up {
            top: 0;
            left: 27.5px;
            border-radius: 5px 5px 0 0;
        }
        .dpad-right {
            right: 0;
            top: 27.5px;
            border-radius: 0 5px 5px 0;
        }
        .dpad-down {
            bottom: 0;
            left: 27.5px;
            border-radius: 0 0 5px 5px;
        }
        .dpad-left {
            left: 0;
            top: 27.5px;
            border-radius: 5px 0 0 5px;
        }
        .vibration-controls {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }
        .vibration-control {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .oscilloscope {
            width: 100%;
            height: 400px;
            background-color: #000;
            margin-top: 20px;
            position: relative;
            overflow: auto;
            border: 1px solid #444;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .power-bar {
            width: 0%;
            height: 30px;
            background-color: #00FF00;
            position: relative;
            border-radius: 5px;
            transition: width 0.3s;
            margin-bottom: 5px;
        }
        .power-bar-label {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-weight: bold;
            text-shadow: 1px 1px 2px black;
        }
        .power-progress-panel {
            margin-top: 20px;
            background-color: #0A590A;
            padding: 15px;
            border-radius: 8px;
        }
        .power-progress-panel h3 {
            margin-top: 0;
            margin-bottom: 15px;
            border-bottom: 1px solid #fff;
            padding-bottom: 5px;
        }
        .power-progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        #powerProgressContainer {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .power-progress-bar {
            height: 25px;
            background-color: #0055FF;
            border-radius: 5px;
            position: relative;
            width: 0%;
            transition: width 0.3s;
            display: flex;
            justify-content: space-between;
            padding-right: 10px;
        }
        .power-progress-label {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 40%;
        }
        .power-progress-info {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-weight: bold;
            text-align: right;
            white-space: nowrap;
            text-shadow: 1px 1px 2px black;
        }
        .data-export {
            margin-top: 20px;
            text-align: center;
        }
        button {
            background-color: #E2B93B;
            color: #000;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #FFD700;
        }
        .status {
            margin-top: 10px;
            font-size: 14px;
            text-align: center;
        }
        .sampling-rate {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
        }
        .sampling-rate label {
            margin-right: 10px;
        }
        .sampling-rate input {
            width: 80px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Xbox One 手柄测试工具</h1>
        
        <div class="section">
            <h2>按键测试</h2>
            <div class="controller" id="controller">
                <!-- 按钮将通过JavaScript动态添加 -->
            </div>
            <div class="status" id="buttonStatus">未检测到手柄</div>
        </div>
        
        <div class="section">
            <h2>震动测试</h2>
            <div class="vibration-controls">
                <div class="vibration-control">
                    <label>左马达强度</label>
                    <input type="range" id="leftMotor" min="0" max="1" step="0.01" value="0">
                    <span id="leftMotorValue">0</span>
                </div>
                <div class="vibration-control">
                    <label>右马达强度</label>
                    <input type="range" id="rightMotor" min="0" max="1" step="0.01" value="0">
                    <span id="rightMotorValue">0</span>
                </div>
                <div class="vibration-control">
                    <label>左扳机震动</label>
                    <input type="range" id="leftTrigger" min="0" max="1" step="0.01" value="0">
                    <span id="leftTriggerValue">0</span>
                </div>
                <div class="vibration-control">
                    <label>右扳机震动</label>
                    <input type="range" id="rightTrigger" min="0" max="1" step="0.01" value="0">
                    <span id="rightTriggerValue">0</span>
                </div>
            </div>
            <div style="text-align: center; margin-top: 15px;">
                <button id="applyVibration">应用震动</button>
                <button id="stopVibration">停止震动</button>
            </div>
        </div>
        
        <div class="section">
            <h2>按键状态监测</h2>
            <div class="control-group">
                <h3>监测控制</h3>
                <div class="control-row">
                    <label for="samplingRate">采样率 (Hz):</label>
                    <input type="number" id="samplingRate" value="60" min="1" max="1000">
                </div>
                <div class="control-row">
                    <button id="startMonitoring">开始监测</button>
                    <button id="stopMonitoring">停止监测</button>
                    <button id="exportData">导出数据</button>
                    <button id="clearData">清除数据</button>
                </div>
                <div id="monitorStatus">未开始监测</div>
                <div id="buttonPressStatus">未检测到按键</div>
            </div>
            <div class="oscilloscope" id="oscilloscope">
                <!-- 蓄力条将通过JavaScript动态添加 -->
            </div>
            <div class="power-progress-panel">
                <div class="power-progress-header">
                    <h3>蓄力进度面板</h3>
                    <button id="resetPowerProgress">重置蓄力数据</button>
                </div>
                <div id="powerProgressContainer">
                    <!-- 蓄力进度条将通过JavaScript动态添加 -->
                </div>
            </div>
        </div>
    </div>

    <script src="controller.js"></script>
</body>
</html>